<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../public/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../public/bootstrap/css/bootstrap-theme.css">
    <link rel="stylesheet" href="./jquery/upload/css/jquery.fileupload.css">
    <link rel="stylesheet" href="./jquery/upload/css/jquery.fileupload-ui.css">
    <style>
        .bar {
            height: 18px;
            background: green;
        }
    </style>
    <title></title>
</head>
<body>
<div class="container">
    <div class="col-md-8 col-md-offset-2">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label class="control-label col-sm-2" for="cust-info">客户信息2:</label>

                <div class="col-sm-10">
                    <input type="email" class="form-control" id="cust-info" placeholder="客户信息">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="pwd">证件类型:</label>

                <div class="col-sm-10">
                    <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="cust-cardno">证件号码:</label>

                <div class="col-sm-10">
                    <input type="email" class="form-control" id="cust-cardno" placeholder="证件号码">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="cust-addr">客户地址:</label>

                <div class="col-sm-10">
                    <input type="email" class="form-control" id="cust-addr" placeholder="客户地址">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="cust-contact-person">联系人2:</label>

                <div class="col-sm-10">
                    <input type="email" class="form-control" id="cust-contact-person" placeholder="联系人">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="cust-contact-phoneno">联系电话:</label>

                <div class="col-sm-10">
                    <input type="email" class="form-control" id="cust-contact-phoneno" placeholder="联系电话">
                </div>
            </div>
            <div class="form-group">
                <div id="input-div" class="col-sm-offset-2 col-sm-10">
                   <span class="btn btn-success fileinput-button">
                        <i class="glyphicon glyphicon-plus"></i>
                        <span>Add files...</span>
                        <!-- The file input field used as target for the file upload widget -->
                        <input id="fileupload" type="file" name="files[]">
                    </span>
                </div>
                <div id="progress">
                    <div class="bar" style="width: 0%;">

                    </div>
                </div>
            </div>
            <div class="form-group">
                <div id="upload-list" class="col-sm-offset-2 col-sm-10">

                </div>


            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-lg btn-success" style="width: 100%;">提交1</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="./jquery/jquery.min.js"></script>
<script src="./jquery/upload/js/vendor/jquery.ui.widget.js"></script>
<script src="../public/bootstrap/js/bootstrap.js"></script>


<script src="./jquery/upload/js/jquery.iframe-transport.js"></script>
<script src="./jquery/upload/js/jquery.fileupload.js"></script>
<script src="./jquery/upload/js/jquery.fileupload-process.js"></script>
<script src="./jquery/upload/js/jquery.fileupload-image.js"></script>
<script src="./jquery/upload/js/jquery.fileupload-audio.js"></script>
<script src="./jquery/upload/js/jquery.fileupload-video.js"></script>
<script src="./jquery/upload/js/jquery.fileupload-validate.js"></script>
<script>
    $(function () {
        $('#fileupload').fileupload({
            url: '/upload',
//            url: 'http://61.178.24.97/MmtWeb/servlet/UploadPictureWeb',
            dataType: 'text',
            add: function (e, data) {
                $('#upload-list').empty();
                data.context = $('<button id="upload-button" class="btn btn-primary"/>').text('上传')
                        .appendTo($('#upload-list'))
                        .click(function () {
                            data.context = $('<p id="upload-msg-p"/>').text('正在上传...').replaceAll($(this));
                            data.submit().success(function (result, textStatus, jqXHR) {
                                var result = $.parseJSON(result);
                                if (result.code == "0") {
                                    data.context.css('color', '#419641');
                                    data.context.text(result.message);
                                }
                                else {
                                    data.context.css('color', '#d9534f');
                                    data.context.text(result.message);
                                }

                            }).error(function (jqXHR, textStatus, errorThrown) {
                                data.context.text('上传失败.');
                            }).complete(function (result, textStatus, jqXHR) {

                            });
                            ;
                        });
                var fileName = "未知文件";
                if (data.files != null && data.files.length > 0)
                    fileName = data.files[0].name;
                data.context.before('<span>' + fileName + '</span>');
            },
            progress: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .bar').css(
                        'width',
                        progress + '%'
                );
            }
        });
    });
</script>
</body>
</html>